<template>
	<view>
		<view class="uni-tab-bar">
			<scroll-view scroll-x class="uni-swiper-tab">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabtap(index)">
						{{tab.name}}
						<view class="swiper-tab-line"></view>
					</view>
				</block>
			</scroll-view>
			
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in recommendlist" :key="index"> 
					<scroll-view  scroll-y class="list">
						<!-- 用户消息模块 -->
						<template v-if="tabIndex===0">
							<view class="userMessage">
								<view class="userNotice">
									<view class="">
										<image src="../../../static/image/notice.png" mode="aspectFill" lazy-load></image>
									</view>
									<view class="">
										<view class="">
											<text>通知消息</text>
											<text>2020-11-11 20:13:14</text>
										</view>
										<view class="">【土流网】土地流转App软件使用培训会土地流转App软件使用培训会</view>
									</view>
								</view>
								<view class="userNotice">
									<view class="">
										<image src="../../../static/image/notice.png" mode="aspectFill" lazy-load></image>
									</view>
									<view class="">
										<view class="">
											<text>订单消息</text>
											<text>2020-11-11 20:13:14</text>
										</view>
										<view class="">【土流网】土地流转App软件使用培训会土地流转App软件使用培训会</view>
									</view>
								</view>
								<view class="userNotice">
									<view class="">
										<image src="../../../static/image/notice.png" mode="aspectFill" lazy-load></image>
									</view>
									<view class="">
										<view class="">
											<text>土地推荐消息</text>
											<text>2020-11-11 20:13:14</text>
										</view>
										<view class="">【土流网】土地流转App软件使用培训会土地流转App软件使用培训会</view>
									</view>
								</view>
							</view>
						</template>
						<!-- 系统消息模块 -->
						<template v-else-if="tabIndex===1">
							<view class="systemMessage">
								<view class="systemMessageTime">2020-11-11 20:13:14</view>
								<view class="systemMessageModel">
									<image src="../../../static/image/2.jpg" mode="aspectFill" lazy-load></image>
									<view>【邀请函】土地流转App软件使用培训会土地流转App软件使用培训会</view>
									<view>公司拥有600万开发者用户，几十万应用案例、12亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。</view>
									<view>
										<view>发布单位: 土流单位</view>
										<view>查看详情></view>
									</view>
								</view>
							</view>
							<view class="systemMessage">
								<view class="systemMessageTime">2020-11-11 20:13:14</view>
								<view class="systemMessageModel">
									<image src="../../../static/image/2.jpg" mode=""></image>
									<view>【邀请函】土地流转App软件使用培训会</view>
									<view>公司拥有600万开发者用户，几十万应用案例、12亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。</view>
									<view>
										<view>发布单位: 土流单位</view>
										<view>查看详情></view>
									</view>
								</view>
							</view>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper> 
		</view>
	</view>
</template>

<script>
	
	export default {
		components:{
			
		},
		data() {
			return {
				tabIndex:0,
				swiperheight:0, //屏幕高度
				tabBars:[   //tabBars数据列表
					{ name:"用户消息",id:"userMessage" },
					{ name:"系统消息",id:"systemMessage" },
				],
				recommendlist:[
					{
						name:"模块一"
					},
					{
						name2:"模块二"
					},
				],
			}
		},
		
		onLoad() {
			uni.getSystemInfo({
				success: (res)=> {
					let height=res.windowHeight-uni.upx2px(100);
					this.swiperheight=height;
				}
			});
		
		},
		
		// 监听上拉触底事件
		onReachBottom(){
			
		},
		
		methods: {
			
			//滑动事件
			tabChange(e){
				this.tabIndex=e.detail.current;
			},
			//点击事件
			tabtap(index){
				this.tabIndex=index;
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../../common/global.less";
	.uni-tab-bar{
		.uni-swiper-tab{
			border-bottom: 1upx solid #eeeeee;
			.swiper-tab-list{
				width: 50%;
			}
		}
	}
	
	.active .swiper-tab-line{
		border-bottom: 6upx solid @uni-color-primary;
		width: 30%;
		margin: auto;
		border-radius: 20upx;
	}
	
	.userMessage{
		.userNotice{
			display: flex;
			margin: @uni-spacing-col-lg @uni-spacing-row-sm;
			>view:first-child{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 @uni-spacing-col-lg;
				// border: 1upx solid;
				>image{
					padding: @uni-spacing-col-lg @uni-spacing-col-lg;
					width: 60upx;
					height: 60upx;
					background: #BBBBBB;
					border-radius: 100%;
				}
			}
			>view:last-child{
				width: 100%;
				>view:first-child{
					display: flex;
					justify-content: space-between;
					margin: 0 @uni-spacing-row-sm;
				}
				>view:last-child{
					width: 100%;
					overflow: hidden;
					text-overflow:ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;      
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	
	.systemMessage{
		margin: 10upx 60upx;
		padding: @uni-spacing-col-lg 0;
		border: 1upx solid #DDDDDD;
		.systemMessageTime{
			width: 300upx;
			margin: auto;
			color: @uni-text-color-inverse;
			margin-top: @uni-spacing-col-lg;
			background-color: #CCCCCC;
			text-align: center;
		}
		.systemMessageModel{
			margin: auto;
			margin-top: @uni-spacing-col-lg;
			>image{
				width: 100%;
				height: 250upx;
			}
			>view:nth-child(2){
				height: 150upx;
				font-size: 40upx;
				color: @uni-text-color-grey;
				text-align: center;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;      
				-webkit-box-orient: vertical;
				//white-space: wrap;
			}
			>view:nth-child(3){
				margin: @uni-spacing-col-lg 0;
				width: 100%;
				height: 200upx;
				color: @uni-text-color-grey;
				/* 可以显示的行数，超出部分用...表示*/
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 4;      
				-webkit-box-orient: vertical;
			}
			>view:last-child{
				display: flex;
				margin: @uni-spacing-col-lg @uni-spacing-row-sm;
				justify-content: space-between;
				>view:first-child{
					color: @uni-text-color-grey;
				}
			}
		}
	}

	
</style>
